<template>
  <div class="content">
    <site-nav />
    <head-item />
    <order-item @addAddress="addAddress" />
    <advantage-item />
    <guide-item />
    <friendly-link />
    <footer-item />
    <!--新增地址弹窗 -->
    <NewReceivingAddress
      v-if="showPopUp"
      @closePopUp="closePopUp"
      @chooseAddress="chooseAddress"
      @submitForm="submitForm"
    />
    <!-- 选择地址弹窗 -->
    <ChooseMap v-if="showMap" @concel="concel" @submitMap="submitMap" />
  </div>
</template>

<script>
import HeadItem from '@/layout/Header'
import SiteNav from '../../layout/Nav'
import AdvantageItem from '../../layout/Advantage'
import FooterItem from '../../layout/Footer'
import GuideItem from '../../layout/Guide'
import FriendlyLink from '../../layout/FriendlyLink'
import OrderItem from './component/Order'
import NewReceivingAddress from '../../components/NewReceivingAddress'
import ChooseMap from '@/components/ChooseMap'
export default {
  name: 'PushOrder',
  components: {
    HeadItem,
    SiteNav,
    AdvantageItem,
    FooterItem,
    GuideItem,
    FriendlyLink,
    OrderItem,
    NewReceivingAddress,
    ChooseMap
  },
  data() {
    return {
      showPopUp: false,
      showMap: false,
      ruleForm: {
        deliveryAddress: '',
        detailedAddress: '',
        consigneeName: '',
        phone: '',
        checked: false
      },
      rules: {
        deliveryAddress: [
          { required: true, message: '请选择收货地址', trigger: 'blur' }
        ],
        detailedAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          {
            pattern: /^[\S\n\s]{1,10}$/,
            message: '地址不能大于50字',
            trigger: 'blur'
          }
        ],
        consigneeName: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
          {
            pattern: /\S/,
            message: '收货人姓名格式不正确',
            trigger: 'blur'
          }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    addAddress() {
      document.body.style.overflow = 'hidden'
      this.showPopUp = true
    },
    submitForm() {
      console.log('submitForm')
    },
    chooseAddress() {
      this.showMap = true
      document.body.style.overflow = 'hidden'
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    },
    // 移除错误提示
    hideErrMsg(progName) {
      this.$refs['ruleForm'].clearValidate(progName)
    },
    closePopUp() {
      this.showPopUp = false
      document.body.style.overflow = 'auto'
    },
    concel() {
      this.showMap = false
    },
    submitMap() {
      this.showMap = false
      this.ruleForm.deliveryAddress = 111
      console.log(this.ruleForm.deliveryAddress)
    }
  }
}
</script>

<style scoped lang="scss">
.save {
  width: 110px;
  height: 37px;
  background-color: #ff3b30;
  border: none;
}
.cancel {
  width: 110px;
  height: 37px;
  background-color: #f5f5f5;
}
.pop-up {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .add-container {
    width: 713px;
    .txt {
      color: #3d3d3d;
      font-size: 16px;
      border: 1px solid #e5e5e5;
      height: 42px;
      background-color: #e5e5e5;
      display: flex;
      padding: 0 15px 0 21px;
      justify-content: space-between;
      align-items: center;
      .el-icon-close {
        font-weight: 700;
      }
    }
    .add-content {
      background-color: #fff;
      height: 400px;
      width: 100%;
      padding: 20px 0 0 94px;
    }
  }
}
::v-deep .el-input__inner {
  height: 35px;
  font-size: 13px;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
  height: 35px;
}
::v-deep .el-form-item:nth-child(2) {
  height: 89px;
  margin-bottom: 0;
  position: relative;
  .el-form-item__error {
    top: 201%;
  }
  .num {
    font-size: 12px;
    color: #6b6b6b;
    position: absolute;
    bottom: -50px;
    left: 250px;
  }
}
::v-deep .el-form-item__content {
  height: 35px;
}
::v-deep .el-input {
  height: 35px;
  width: 236px;
}
::v-deep .el-form-item__label {
  height: 35px;
}
::v-deep .el-textarea__inner {
  width: 236px;
  height: 70px;
  font-size: 13px;
  //  margin-bottom: 19px;
}
::v-deep .el-textarea {
  width: 236px;
}
::v-deep .el-input__icon {
  color: #ff3b30;
}
</style>
